<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生日快乐</title>
<style type="text/css">
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/stylesheets/style.css">
<link rel="stylesheet" href="css/style.css" media="screen"/>
<link rel="stylesheet" href="css/smusic.css" />
<script type="text/javascript" src="js/contro.js"></script>
</head>
<body>
	<!-- <button onclick="changeBackground()">切换</button> -->
	<iframe id="back-main" class="back" data-animation="pt-page pt-page-1"
		style="width: 100%; height: 100%;" src="/charon/mercury/c1/demo.html">
	</iframe>
	<form method="post" action="" id="form1">
		<div id="body">
			<div id="jp_container" role="application" aria-label="media player">
				<div class="jp-type-playlist">
					<div id="jplayer" class="jp-jplayer"></div>
					<div class="jp-time">
						<span class="jp-current-time" role="timer" aria-label="time"></span><span
							class="jp-duration" role="timer" aria-label="duration"></span>
					</div>
				</div>
			</div>
		</div>
		<div id="douban" style="margin: auto">
			<div
				style="position: absolute; top: 200px; left: 50%; margin: auto; margin-left: -250px; width: 500px; height: 40px">
				<div onclick="showSongLists()" style="text-align: center;"
					data-hint="歌曲不合口味？点击更换歌单。" class="btn hint  hint-top">
					<a><span>_</span>推荐歌单</a>
				</div>
				&nbsp; &nbsp; &nbsp;
				<div style="text-align: center" data-hint="会在新页面打开QAQ。"
					class="btn hint  hint-top" onclick="javascript:window.open('http://www.charon.fun')">
					<a target="_blank"><span>_</span>返回首页</a>
				</div>
			</div>
			<input style="display: none" type="text">
			<div class="search"
				style="position: absolute; top: 350px; left: 50%; margin: auto; margin-left: -251px;">
				<input id="searchContent" type="search" placeholder="Search here..."
					required>
				<button type="button" onclick="search()" id="searchBtn">Search</button>
			</div>

			<div
				style="color: gray; font-family: 微软雅黑; font-size: 14px; position: fixed; bottom: 10px; width: 100%;">
				&copy; 2018 www.charon.fun 版权所有  邮箱：248135724@.qq.com <a
					style="color: gray; font-family: 微软雅黑; font-size: 14px; a: hover:black"
					target="_blank" href="#" title="留言给我">给我留言</a> &nbsp;&nbsp;&nbsp;<a
					style="color: gray; font-family: 微软雅黑; font-size: 14px; a: hover:black"
					target="_blank" href="" title="工信部备案">ICP：鲁ICP备18051545号-1</a>
			</div>
			<div class="grid-music-container f-usn">
				<div class="m-music-play-wrap" onclick="autoHidden();">
					<div class="u-cover"></div>
					<div class="m-now-info">

						<h1 class="u-music-title">
							<strong>标题</strong><small>歌手</small>
						</h1>
						<div class="m-now-controls">
							<div class="u-control u-process" id="progressBar"
								style="cursor: pointer">
								<span class="buffer-process"></span> <span
									class="current-process"></span>
							</div>
							<div class="u-control u-time">00:00/00:00</div>
							<div class="u-control u-volume">
								<div class="volume-process" data-volume="0.50"
									style="margin-bottom: -45px;">
									<span class="volume-current"></span> <span class="volume-bar"></span>
									<span class="volume-event"></span>
								</div>
								<a class="volume-control" style="margin-bottom: -35px;"></a>
							</div>
						</div>
						<div class="m-play-controls">
							<a class="u-play-btn prev" title="上一曲"></a> <a
								class="u-play-btn ctrl-play play" title="暂停"></a> <a
								class="u-play-btn next" title="下一曲"></a> <a
								class="u-play-btn mode mode-list current" title="列表循环"></a> <a
								class="u-play-btn mode mode-random" title="随机播放"></a> <a
								class="u-play-btn mode mode-single" title="单曲循环"></a>
						</div>
					</div>
					<div class="toggle">
						<!-- #CECFD4 -->
						<button type="button" class="side-song-list-btn"
							onclick="showList()">☰</button>
					</div>
					<div class="menu_list" style="margin-right: 0px;">
						<ul style="height: 100%">
							<li>
								<button onclick="MusicUtil.songLike()" type="button" title="喜欢"
									style="color: #0090FF">❤</button>
							</li>
							<li>
								<button onclick="MusicUtil.songSick()" type="button" title="不喜欢"
									style="color: #555555">✖</button>
							</li>
							<li>
								<button onclick="MusicUtil.songCollect()" type="button" title="收藏"
									style="color: #0090FF">★</button>
							</li>
						</ul>
					</div>
				</div>
				<div id="songList" class="m-music-list-wrap" hidden="hidden">
				</div>
			</div>
			<script src="js/lrc.js"></script>
			<script src="js/smusic.js"></script>
		</div>
	</form>
	<!-- 歌词展示 -->
	<div id="lrc_container" hidden="hidden"
		style="height: 60%; font-size: 20px; line-height: 45px; width: 500px; background: rgb(0, 0, 0, 0); position: absolute; top: 50%; margin-top: -270px; z-index: 102; left: 50%; margin-left: -250px; pointer-events: none; overflow: hidden;">
		<div id="lrc_list"></div>
	</div>
	<!-- 搜索结果列表 -->
	<div id="searchList" hidden="hidden"
		style="overflow: auto; height: 65%; font-size: 16px; line-height: 45px; width: 1000px; background: rgb(0, 0, 0, 0); position: absolute; top: 50%; margin-top:-16%; z-index: 102; left: 50%; margin-left: -500px;">
		<table>
			<thead>
				<tr>
					<th>封面</th>
					<th>歌曲</th>
					<th>专辑</th>
					<th>作者</th>
					<th>时间</th>
			</thead>
			<tbody id='contentSearch'></tbody>
			</table>
	</div>
	<!-- 歌单流 -->
	<div id="songLists" hidden="hidden" class="song-lists"></div>

	<button id="showBtn" hidden="hidden"
		style="overflow: auto; width: 60px; height: 30px; text-align: center; position: absolute; bottom: 30px; right: 20px; border: 2px solid #0090FF; background: rgb(0, 0, 0, 0); color: white; border-radius: 20%"
		onclick="showContro()">显示</button>
		
</body>
</html>